<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script>
          $(function(){
              $("#btnCreate").click(function(){
                  var aLink = $('<a href="http://www.baidu.com">这是一个a</a>');
                  //append()：将创建的元素动态的放到指定元素里面的最后位置
                 // $("div").append(aLink);
                 //$("div").append('<a href="http://www.baidu.com">这是一个a</a>');

                  //prepend()：将创建的元素动态的放到指定元素里面的第一个位置
                 //$("div").prepend('<a href="http://www.baidu.com">这是一个a</a>');

                   $('<a href="http://www.baidu.com">这是一个a</a>').appendTo($("div"));

                   //after()：将创建的元素动态的放到指定元素里面的后面(兄弟节点)
                // $("p").after("<p>hello</p>");

                  //before()：将创建的元素动态的放到指定元素里面的前面(兄弟节点)
                 // $("p").before("<p>hello</p>");

                  //将页面中原有的元素添加到指定的元素里面，先删除页面中原有的元素，然后在添加
                // $("div").append($("p"));
              })
          })
    </script>
</head>
<body>
 <input type="button" value="动态创建元素" id="btnCreate">
 <p>这是一段文字22</p>
 <div>
     <p>这是一段文字</p>
     <span>你好啊</span>
 </div>
</body>
</html>